<template>
	<div >

		<flexbox class="pt10 pb10 bgwhite mb10" :gutter="0">
	      <flexbox-item :span="1/5" class="text-center">
	      	<img src="../../assets/qmlogo.png" width="40" height="40">
	      </flexbox-item>

	      <flexbox-item :span="4/5" class="h4">
	      	<span v-if="orderinfo.pay_state == '1'">订单已支付</span>
			<span v-if="orderinfo.pay_state == '0'">订单未支付</span>

			<span v-if="orderinfo.ticket_state == '0'"> , 未出票</span>
			<span v-if="orderinfo.ticket_state == '1'"> , 出票中</span>
			<span v-if="orderinfo.ticket_state == '2'"> , 出票完成</span>
			<span v-if="orderinfo.ticket_state == '9'"> , 出票失败</span>

			<span v-if="orderinfo.profit_state == '0'"> , 可退</span>
			<span v-if="orderinfo.profit_state == '1'"> , 不可退</span>
			<div class="mt5 h5 hui">订单编号：{{ orderinfo.code }}</div>
	      </flexbox-item>

	    </flexbox>

	    <flexbox v-if="orderinfo.ticket_state == '9'" class="mt10">
	    	<flexbox-item >
	    		<yd-cell-group >
		            <yd-cell-item >
		                <span slot="left" class="hh pt10 pb10 red">
		                	失败原因：{{orderinfo.cancel_reason}}
		                </span>
		            </yd-cell-item>
		        </yd-cell-group>
	    	</flexbox-item>
	    </flexbox>

	    <flexbox >
	    	<flexbox-item >
	    		<yd-cell-group >
		            <yd-cell-item >
		            	<span slot="left">产品名称</span>
		                <span slot="right" >{{orderinfo.title}}</span>
		            </yd-cell-item>

		            <yd-cell-item >
		            	<span slot="left">产品型号</span>
		            	<span slot="right">{{orderinfo.attr_name}}</span>
		            </yd-cell-item>

		            <!-- <yd-cell-item >
		            	<span slot="left">实际支付</span>
		            	<span slot="right">¥ {{orderinfo.pay_fee}}</span>
		            </yd-cell-item> -->

		            <yd-cell-item >
		            	<span slot="left">购买数量</span>
		            	<span slot="right">数量：{{orderinfo.num}} / 使用：{{orderinfo.used}} / 退：{{orderinfo.back}}</span>
		            </yd-cell-item>



		            <yd-cell-item v-if="orderinfo.group != undefined">
		                <span slot="left">出游时间</span>
		                <span slot="right">{{orderinfo.group}}</span>
		            </yd-cell-item>

		        </yd-cell-group>
	    	</flexbox-item>

	    </flexbox>

	    <flexbox >
	    	<flexbox-item >
	    		<yd-cell-group>
	    			<yd-cell-item allow @click.native="QRCode">
	    				<span slot="left">票码：{{orderinfo.order_unique_code}}</span>
	    				<span slot="right" >
	    					<qrcode-vue 
						  		:value="orderinfo.order_unique_code" 
						  		:size="40" level="H">
						  	</qrcode-vue>
	    				</span>
	    			</yd-cell-item>

	    			<div v-for="t in orderticketlist" class="pb10">
			            <div class="piao" >
			            	<yd-icon size="18px"
			            	v-if="t.state == '1'" slot="icon" color="#16AA6B" name="shield-outline"></yd-icon>

			            	<yd-icon size="18px"
			            	v-if="t.state == '0'" slot="icon" class="red" name="error-outline"></yd-icon>

			            	{{t.type_name}}
			            </div>
			            <flexbox>
			            	<flexbox-item v-if="t.state == '1'">
			            		<div class="youxiaoqi">有效期：{{t.period_start}} 至 {{t.period}}</span></div>
			            	</flexbox-item>
			            	<flexbox-item v-if="t.state == '0'">
			            		<div v-if="t.used == '1'" class="youxiaoqi">
			            			使用时间：{{t.otime}}
			            		</div>
			            		<div v-if="t.back == '1'" class="youxiaoqi">
			            			退票时间：{{t.otime}}
			            		</div>
			            	</flexbox-item>
			            </flexbox>
		            </div>
		        </yd-cell-group>
	    	</flexbox-item>
	    </flexbox>

	    <flexbox>
	    	<flexbox-item >
	    		<yd-cell-group >
		            <yd-cell-item >
		                <span slot="left">使用须知</span>
		                <span slot="right">
		                	<yd-button type="hollow"
		                	@click.native="kf"
		                	>联系客服</yd-button>
			                <yd-button type="hollow"
			                v-if="orderinfo.profit_state == '0' && maxback != 0 
				   	 		&& orderinfo.ticket_state == '2'"
							@click.native="back"
			                >申请退款</yd-button>
		                </span>
		            </yd-cell-item>

		            <div class="bookingnotes" v-html="bn"></div>
		        </yd-cell-group>
	    	</flexbox-item>
	    </flexbox>

	    <flexbox>
	    	<flexbox-item >
	    		<yd-cell-group >
		            <yd-cell-item >
		                <span slot="left">下单姓名</span>
		                <span slot="right">{{orderinfo.name}}</span>
		            </yd-cell-item>

		            <yd-cell-item >
		                <span slot="left">下单电话</span>
		                <span slot="right">{{orderinfo.mobile}}</span>
		            </yd-cell-item>

		            <yd-cell-item v-if="orderinfo.cardno != undefined">
		                <span slot="left">身份证</span>
		                <span slot="right">{{orderinfo.cardno}}</span>
		            </yd-cell-item>

		            <yd-cell-item >
		                <span slot="left">下单时间</span>
		                <span slot="right">{{orderinfo.create_time}}</span>
		            </yd-cell-item>

		            <yd-cell-item >
		            	<span slot="left">实际支付</span>
		            	<span slot="right">¥ {{orderinfo.pay_fee}}</span>
		            </yd-cell-item>

		            <yd-cell-item >
		                <span slot="left">支付时间</span>
		                <span slot="right">{{orderinfo.pay_time}}</span>
		            </yd-cell-item>

		        </yd-cell-group>
	    	</flexbox-item>
	    </flexbox>

	    <flexbox>
		<flexbox-item v-if="QRCodeVisible" class="bgwhite">
		  <yd-popup  position="center"
			  v-model="QRCodeVisible">
			  <div class="text-center QRCode" >
			  	<qrcode-vue class=""
			  		:value="this.orderinfo.order_unique_code" 
			  		:size="200" level="H">
			  	</qrcode-vue>

			  	<div class="h1 mt10">{{this.orderinfo.order_unique_code}}</div>
			  </div>
	  	  </yd-popup>
	  	</flexbox-item>
	  	</flexbox>

	</div>
</template>


<script >

import { mapGetters } from 'vuex';
import QrcodeVue from 'qrcode.vue';
import wx from '../../util/weixin';
import { cutImage } from '../../util/util';

export default {

	name : 'makeorder',

	data () {
		return {
			'QRCodeVisible' : false,

			orderinfo : {},
		}
	},

	computed : {

		...mapGetters(['orderticketlist']),

		maxback () {
			return this.orderinfo.num - this.orderinfo.used - this.orderinfo.back;
		},

		bn () {
			return this.orderinfo.bookingnotes ? 
			this.orderinfo.bookingnotes.replace(/\n/g,"<br/>") : '';
		},
	},

	components : {
		QrcodeVue,
	},

	methods : {

		init () {
			this._getOrderInfo();
		},
		
		back () {

			//只能全单退。
			if(this.orderinfo.back_type_limit == '1')
			{
				this.$dialog.confirm({
                    title: '退票数量',
                    mes: '该产品是全单退，确定要全退吗（'+this.maxback+'张）',
                    opts: () => {
                        this.$store.dispatch('orderBack', {
							code : this.orderinfo.code,
							count : this.maxback,
							callback : (orderbackinfo) => {
								console.log(orderbackinfo);
								if(orderbackinfo.result == '1'){
									this.$dialog.alert({'mes' : '退票成功'});
									this.init();
								}
							}
						});
                    }
                });
			}
			//随便退。
			else //if(this.orderinfo.back_type_limit == '0')
			{
				var msg = '最多退' + this.maxback + '张票';
				this.$dialog.confirm({

					'title' : msg,

					'mes' : '<input id="pname" style="height: 1rem;border: none;font-size: .3rem;justify-content: flex-start;-webkit-box-align: center;align-items: center;text-align: left;vertical-align: baseline;border-radius: 0;" value="'+ this.maxback +'"  placeholder="'+msg+'">',

					'opts': [
						{
	                        txt: '取消',
	                        color: false,
	                        callback: () => {
	                            console.log('取消');
	                        }
	                    },
	                    {
	                        txt: '确定',
	                        color: true,
	                        callback: () => {
	                            var tt = parseInt(document.getElementById('pname').value);

	                            console.log(tt);

	                            if(isNaN(tt)){
	                            	this.$dialog.alert({'mes' : '请输入数字'});
	                            	return;
	                            }

	                            if(tt > this.maxback) {
						  			this.$dialog.alert({'mes' : msg});
						  			return;
						  		}

	                            this.$store.dispatch('orderBack', {
									code : this.orderinfo.code,
									count : tt,
									callback : (orderbackinfo) => {
										console.log(orderbackinfo);
										if(orderbackinfo.result == '1'){
											this.$dialog.alert({'mes' : '退票成功'});
											this.init();
										}
									},
									error : res => {
										this.$dialog.alert({'mes' : res});
									}
								});
	                        }
	                    }
	                ]
				});
			}
		},

		_getOrderInfo () {

			const para = {
				fun : 'jmorderinfo',
				code : this.$route.params.code,
				cb : res => {
					this.orderinfo = res;

					this.$store.dispatch('orderTicketList', {
						code : this.orderinfo.code,
						callback : (orderticketlist) => {
							console.log(orderticketlist);
						}
					});
				}
			};

			this.$store.dispatch('update', para);
		},

		QRCode () {
			this.QRCodeVisible = true;

		},

      	kf () {
      		window.location.href = 'tel://' + this.orderinfo.kfmobile;
      	},

	},

	mounted () {
		this.init();
	},
}

</script>

<style scope>

.title {
	padding-left: .24rem;
	padding-top: 10px;
	padding-bottom: 10px;
	font-size: .3rem;
}
.bookingnotes{
	padding: 8px 20px;
	font-size: .26rem;
}

.piao{
	padding: 5px 20px;
	font-size: .26rem;
	/*line-height: .26rem;*/
}

.youxiaoqi {
	padding: 0 20px;
	font-size: .26rem;
	color: #999;
	font-size: .18rem;
}


.QRCode {
	width: 220px;
	height: 260px;
	background-color: #fff;
	padding-top: 10px;

}

</style>